import { addIcon, Icon as IconifyIcon } from '@iconify/vue/dist/offline'
import { defineComponent, h } from 'vue'

// 定义简化版的IconifyIcon类型
interface SimpleIconifyIcon {
  body: string
  [key: string]: any
}

// Iconify Icon在Vue里本地使用（用于内网环境）
export default defineComponent({
  name: 'IconifyIconOffline',
  components: { IconifyIcon },
  props: {
    icon: {
      type: [Object, String],
      default: null,
    },
  },
  data() {
    return {
      // 存储动态生成的图标名称
      iconName: '',
    }
  },
  render() {
    // 如果icon是对象，需要将其添加到图标集
    if (typeof this.icon === 'object' && this.icon !== null && 'body' in this.icon) {
      // 为对象icon生成一个唯一名称
      this.iconName = `icon-${Date.now()}`
      // 将对象作为图标数据添加到图标集
      addIcon(this.iconName, this.icon as SimpleIconifyIcon)
    }

    const attrs = this.$attrs
    return h(
      IconifyIcon,
      {
        // 如果icon是对象类型且有body属性，使用生成的名称，否则如果是字符串则直接使用，其他情况返回空字符串
        icon:
          typeof this.icon === 'object' && this.icon !== null && 'body' in this.icon
            ? this.iconName
            : typeof this.icon === 'string'
              ? this.icon
              : '',
        style: attrs?.style ? Object.assign(attrs.style, { outline: 'none' }) : { outline: 'none' },
        ...attrs,
      },
      { default: () => [] },
    )
  },
})
